<template>
  <div class="employment-container">
    <!-- 顶部横幅 -->
    <div class="employment-banner">
      <div class="banner-content">
        <h1><i class="fas fa-briefcase"></i> 就业服务中心</h1>
        <p class="subtitle">助力您的职业发展，实现就业目标</p>
      </div>
    </div>

    <!-- 就业状态卡片 -->
    <div class="employment-status">
      <div class="status-card" :class="{ 'active': employmentStatus === 'seeking' }">
        <div class="card-icon">
          <i class="fas fa-search"></i>
        </div>
        <div class="card-content">
          <h3>求职中</h3>
          <p v-if="employmentStatus === 'seeking'">您当前正在积极求职</p>
          <button v-else class="status-btn" @click="updateStatus('seeking')">标记为求职中</button>
        </div>
      </div>

      <div class="status-card" :class="{ 'active': employmentStatus === 'interviewing' }">
        <div class="card-icon">
          <i class="fas fa-handshake"></i>
        </div>
        <div class="card-content">
          <h3>面试中</h3>
          <p v-if="employmentStatus === 'interviewing'">您正在参加企业面试</p>
          <button v-else class="status-btn" @click="updateStatus('interviewing')">标记为面试中</button>
        </div>
      </div>

      <div class="status-card" :class="{ 'active': employmentStatus === 'employed' }">
        <div class="card-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <div class="card-content">
          <h3>已就业</h3>
          <p v-if="employmentStatus === 'employed'">您已成功就业</p>
          <button v-else class="status-btn" @click="showEmploymentForm">标记为已就业</button>
        </div>
      </div>
    </div>

    <!-- 主要功能区域 -->
    <div class="employment-main">
      <!-- 就业信息填写 -->
      <div class="employment-section">
        <div class="section-header">
          <h2><i class="fas fa-edit"></i> 就业信息管理</h2>
          <p class="section-description">填写或更新您的就业信息</p>
        </div>
        
        <div class="employment-form" v-if="showForm">
          <div class="form-group">
            <label for="company">就业公司</label>
            <input type="text" id="company" v-model="employmentInfo.company" placeholder="请输入公司全称">
          </div>
          
          <div class="form-group">
            <label for="position">职位名称</label>
            <input type="text" id="position" v-model="employmentInfo.position" placeholder="请输入您的职位">
          </div>
          
          <div class="form-group">
            <label for="salary">薪资范围</label>
            <select id="salary" v-model="employmentInfo.salary">
              <option value="">请选择薪资范围</option>
              <option value="5k以下">5k以下</option>
              <option value="5k-10k">5k-10k</option>
              <option value="10k-15k">10k-15k</option>
              <option value="15k-20k">15k-20k</option>
              <option value="20k-30k">20k-30k</option>
              <option value="30k以上">30k以上</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="startDate">入职日期</label>
            <input type="date" id="startDate" v-model="employmentInfo.startDate">
          </div>
          
          <div class="form-group">
            <label for="address">工作地点</label>
            <input type="text" id="address" v-model="employmentInfo.address" placeholder="请输入工作城市">
          </div>
          
          <div class="form-actions">
            <button class="save-btn" @click="saveEmploymentInfo">保存信息</button>
            <button class="cancel-btn" @click="cancelForm">取消</button>
          </div>
        </div>
        
        <div class="employment-info" v-else>
          <div class="info-item" v-if="employmentInfo.company">
            <div class="info-label">公司名称:</div>
            <div class="info-value">{{ employmentInfo.company }}</div>
            <button class="edit-btn" @click="showEmploymentForm"><i class="fas fa-edit"></i> 编辑</button>
          </div>
          
          <div class="info-item" v-if="employmentInfo.position">
            <div class="info-label">职位:</div>
            <div class="info-value">{{ employmentInfo.position }}</div>
          </div>
          
          <div class="info-item" v-if="employmentInfo.salary">
            <div class="info-label">薪资范围:</div>
            <div class="info-value">{{ employmentInfo.salary }}</div>
          </div>
          
          <div class="info-item" v-if="employmentInfo.startDate">
            <div class="info-label">入职日期:</div>
            <div class="info-value">{{ formatDate(employmentInfo.startDate) }}</div>
          </div>
          
          <div class="info-item" v-if="employmentInfo.address">
            <div class="info-label">工作地点:</div>
            <div class="info-value">{{ employmentInfo.address }}</div>
          </div>
          
          <div class="empty-state" v-if="!employmentInfo.company">
            <i class="fas fa-briefcase"></i>
            <p>您尚未填写就业信息</p>
            <button class="add-btn" @click="showEmploymentForm"><i class="fas fa-plus"></i> 填写就业信息</button>
          </div>
        </div>
      </div>

      <!-- 就业进度追踪 -->
      <div class="employment-section">
        <div class="section-header">
          <h2><i class="fas fa-chart-line"></i> 就业进度追踪</h2>
          <p class="section-description">记录和管理您的求职过程</p>
        </div>
        
        <div class="progress-container">
          <div class="progress-steps">
            <div class="step" :class="{ 'active': currentStep >= 1, 'current': currentStep === 1 }">
              <div class="step-number">1</div>
              <div class="step-info">
                <h3>简历投递</h3>
                <p v-if="progress.resumeSubmit">已投递 {{ progress.resumeSubmit }} 份</p>
                <button v-else class="step-btn" @click="recordStep('resumeSubmit')">记录投递</button>
              </div>
            </div>
            
            <div class="step" :class="{ 'active': currentStep >= 2, 'current': currentStep === 2 }">
              <div class="step-number">2</div>
              <div class="step-info">
                <h3>面试邀请</h3>
                <p v-if="progress.interviewInvite">收到 {{ progress.interviewInvite }} 个邀请</p>
                <button v-else class="step-btn" @click="recordStep('interviewInvite')">记录邀请</button>
              </div>
            </div>
            
            <div class="step" :class="{ 'active': currentStep >= 3, 'current': currentStep === 3 }">
              <div class="step-number">3</div>
              <div class="step-info">
                <h3>完成面试</h3>
                <p v-if="progress.interviewComplete">已完成 {{ progress.interviewComplete }} 次面试</p>
                <button v-else class="step-btn" @click="recordStep('interviewComplete')">记录面试</button>
              </div>
            </div>
            
            <div class="step" :class="{ 'active': currentStep >= 4, 'current': currentStep === 4 }">
              <div class="step-number">4</div>
              <div class="step-info">
                <h3>获得offer</h3>
                <p v-if="progress.offerReceived">收到 {{ progress.offerReceived }} 个offer</p>
                <button v-else class="step-btn" @click="recordStep('offerReceived')">记录offer</button>
              </div>
            </div>
            
            <div class="step" :class="{ 'active': currentStep >= 5, 'current': currentStep === 5 }">
              <div class="step-number">5</div>
              <div class="step-info">
                <h3>成功入职</h3>
                <p v-if="progress.employed">已就业</p>
                <button v-else class="step-btn" @click="recordStep('employed')">记录入职</button>
              </div>
            </div>
          </div>
          
          <div class="progress-chart">
            <canvas ref="progressChart"></canvas>
          </div>
        </div>
      </div>

      <!-- 就业资源推荐 -->
      <div class="employment-section">
        <div class="section-header">
          <h2><i class="fas fa-book-open"></i> 就业资源</h2>
          <p class="section-description">为您精选的就业相关资源</p>
        </div>
        
        <div class="resource-tabs">
          <button 
            v-for="tab in resourceTabs" 
            :key="tab.id"
            :class="{ 'active': activeTab === tab.id }"
            @click="activeTab = tab.id"
          >
            {{ tab.label }}
          </button>
        </div>
        
        <div class="resource-content">
          <div class="resource-list" v-if="activeTab === 'jobs'">
            <div class="resource-card" v-for="job in jobRecommendations" :key="job.id">
              <div class="card-header">
                <h3>{{ job.title }}</h3>
                <span class="company">{{ job.company }}</span>
                <span class="salary">{{ job.salary }}</span>
              </div>
              <div class="card-body">
                <div class="job-meta">
                  <span><i class="fas fa-map-marker-alt"></i> {{ job.location }}</span>
                  <span><i class="fas fa-graduation-cap"></i> {{ job.education }}</span>
                  <span><i class="fas fa-briefcase"></i> {{ job.experience }}</span>
                </div>
                <p class="job-desc">{{ job.description }}</p>
              </div>
              <div class="card-footer">
                <button class="apply-btn" @click="applyJob(job.id)"><i class="fas fa-paper-plane"></i> 立即申请</button>
                <button class="detail-btn" @click="viewJobDetail(job.id)"><i class="fas fa-info-circle"></i> 查看详情</button>
              </div>
            </div>
          </div>
          
          <div class="resource-list" v-if="activeTab === 'articles'">
            <div class="article-card" v-for="article in careerArticles" :key="article.id">
              <div class="article-image">
                <img :src="article.image" :alt="article.title">
              </div>
              <div class="article-content">
                <h3>{{ article.title }}</h3>
                <p class="article-excerpt">{{ article.excerpt }}</p>
                <div class="article-meta">
                  <span><i class="fas fa-clock"></i> {{ article.date }}</span>
                  <span><i class="fas fa-eye"></i> {{ article.views }} 阅读</span>
                </div>
                <router-link :to="`/articles/${article.id}`" class="read-more">阅读全文 <i class="fas fa-arrow-right"></i></router-link>
              </div>
            </div>
          </div>
          
          <div class="resource-list" v-if="activeTab === 'tools'">
            <div class="tool-card" v-for="tool in careerTools" :key="tool.id">
              <div class="tool-icon">
                <i :class="tool.icon"></i>
              </div>
              <div class="tool-content">
                <h3>{{ tool.name }}</h3>
                <p>{{ tool.description }}</p>
                <a :href="tool.link" target="_blank" class="tool-link">使用工具 <i class="fas fa-external-link-alt"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 就业成功案例 -->
    <div class="success-cases">
      <div class="section-header">
        <h2><i class="fas fa-medal"></i> 成功案例</h2>
        <p class="section-description">看看其他同学如何成功就业</p>
      </div>
      
      <div class="case-list">
        <div class="case-card" v-for="(caseStudy, index) in successCases" :key="index">
          <div class="case-image">
            <img :src="caseStudy.avatar" :alt="caseStudy.name">
          </div>
          <div class="case-content">
            <h3>{{ caseStudy.name }}</h3>
            <p class="case-position">{{ caseStudy.position }} @ {{ caseStudy.company }}</p>
            <div class="case-stats">
              <div class="stat">
                <div class="stat-value">{{ caseStudy.salary }}</div>
                <div class="stat-label">薪资</div>
              </div>
              <div class="stat">
                <div class="stat-value">{{ caseStudy.time }}</div>
                <div class="stat-label">求职周期</div>
              </div>
              <div class="stat">
                <div class="stat-value">{{ caseStudy.interviews }}</div>
                <div class="stat-label">面试次数</div>
              </div>
            </div>
            <p class="case-quote">"{{ caseStudy.quote }}"</p>
            <button class="case-btn" @click="viewCaseDetail(caseStudy.id)">查看详情</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)

export default {
  name: 'EmploymentCenter',
  data() {
    return {
      employmentStatus: 'seeking', // 'seeking', 'interviewing', 'employed'
      employmentInfo: {
        company: '',
        position: '',
        salary: '',
        startDate: '',
        address: ''
      },
      showForm: false,
      progress: {
        resumeSubmit: 5,
        interviewInvite: 3,
        interviewComplete: 2,
        offerReceived: 1,
        employed: false
      },
      currentStep: 1,
      activeTab: 'jobs',
      resourceTabs: [
        { id: 'jobs', label: '职位推荐' },
        { id: 'articles', label: '求职文章' },
        { id: 'tools', label: '求职工具' }
      ],
      jobRecommendations: [
        {
          id: 1,
          title: '前端开发工程师',
          company: '科技公司A',
          salary: '15k-25k',
          location: '北京',
          education: '本科及以上',
          experience: '1-3年',
          description: '负责公司产品前端开发工作，使用Vue/React框架，参与产品需求讨论和技术方案设计。'
        },
        // 更多职位数据...
      ],
      careerArticles: [
        {
          id: 1,
          title: '如何准备技术面试：从简历到算法',
          excerpt: '本文详细介绍了技术面试的完整准备流程，包括简历优化、算法练习和系统设计准备等内容...',
          image: 'https://example.com/article1.jpg',
          date: '2023-10-15',
          views: 1245
        },
        // 更多文章数据...
      ],
      careerTools: [
        {
          id: 1,
          name: '简历优化工具',
          description: '智能分析您的简历，提供优化建议，提高通过率',
          icon: 'fas fa-file-alt',
          link: '#'
        },
        // 更多工具数据...
      ],
      successCases: [
        {
          id: 1,
          name: '张同学',
          position: '前端开发工程师',
          company: '互联网公司B',
          salary: '18k',
          time: '2个月',
          interviews: 5,
          quote: '通过系统的面试准备和模拟练习，我成功获得了理想的offer',
          avatar: 'https://example.com/avatar1.jpg'
        },
        // 更多案例数据...
      ],
      progressChart: null
    }
  },
  mounted() {
    this.loadEmploymentData()
    this.initProgressChart()
    document.title = '就业中心 - 职业发展平台'
  },
  beforeUnmount() {
    if (this.progressChart) {
      this.progressChart.destroy()
    }
  },
  methods: {
    loadEmploymentData() {
      // 模拟从API加载数据
      const savedData = localStorage.getItem('employmentData')
      if (savedData) {
        const data = JSON.parse(savedData)
        this.employmentStatus = data.status || 'seeking'
        this.employmentInfo = data.info || {}
        this.progress = data.progress || {}
        
        // 计算当前步骤
        if (this.progress.employed) {
          this.currentStep = 5
        } else if (this.progress.offerReceived) {
          this.currentStep = 4
        } else if (this.progress.interviewComplete) {
          this.currentStep = 3
        } else if (this.progress.interviewInvite) {
          this.currentStep = 2
        } else if (this.progress.resumeSubmit) {
          this.currentStep = 1
        }
      }
    },
    saveEmploymentData() {
      const data = {
        status: this.employmentStatus,
        info: this.employmentInfo,
        progress: this.progress
      }
      localStorage.setItem('employmentData', JSON.stringify(data))
    },
    updateStatus(status) {
      this.employmentStatus = status
      if (status === 'employed' && !this.employmentInfo.company) {
        this.showEmploymentForm()
      }
      this.saveEmploymentData()
    },
    showEmploymentForm() {
      this.showForm = true
    },
    cancelForm() {
      this.showForm = false
    },
    saveEmploymentInfo() {
      if (!this.employmentInfo.company) {
        alert('请填写公司名称')
        return
      }
      
      this.employmentStatus = 'employed'
      this.progress.employed = true
      this.currentStep = 5
      this.showForm = false
      this.saveEmploymentData()
      alert('就业信息保存成功！')
    },
    recordStep(step) {
      if (step === 'resumeSubmit') {
        this.progress.resumeSubmit = (this.progress.resumeSubmit || 0) + 1
        this.currentStep = 1
      } else if (step === 'interviewInvite') {
        this.progress.interviewInvite = (this.progress.interviewInvite || 0) + 1
        this.currentStep = 2
      } else if (step === 'interviewComplete') {
        this.progress.interviewComplete = (this.progress.interviewComplete || 0) + 1
        this.currentStep = 3
      } else if (step === 'offerReceived') {
        this.progress.offerReceived = (this.progress.offerReceived || 0) + 1
        this.currentStep = 4
      } else if (step === 'employed') {
        this.progress.employed = true
        this.currentStep = 5
        this.showEmploymentForm()
      }
      
      this.saveEmploymentData()
    },
    initProgressChart() {
      const ctx = this.$refs.progressChart.getContext('2d')
      
      const labels = ['简历投递', '面试邀请', '完成面试', '获得offer', '成功入职']
      const data = [
        this.progress.resumeSubmit || 0,
        this.progress.interviewInvite || 0,
        this.progress.interviewComplete || 0,
        this.progress.offerReceived || 0,
        this.progress.employed ? 1 : 0
      ]
      
      this.progressChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels,
          datasets: [{
            label: '求职进度',
            data,
            backgroundColor: [
              'rgba(52, 152, 219, 0.7)',
              'rgba(155, 89, 182, 0.7)',
              'rgba(241, 196, 15, 0.7)',
              'rgba(46, 204, 113, 0.7)',
              'rgba(39, 174, 96, 0.7)'
            ],
            borderColor: [
              'rgba(52, 152, 219, 1)',
              'rgba(155, 89, 182, 1)',
              'rgba(241, 196, 15, 1)',
              'rgba(46, 204, 113, 1)',
              'rgba(39, 174, 96, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true,
              ticks: {
                stepSize: 1
              }
            }
          },
          plugins: {
            legend: {
              display: false
            }
          }
        }
      })
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      })
    },
    applyJob(jobId) {
      alert(`申请职位 ${jobId} 的功能需要后端支持`)
    },
    viewJobDetail(jobId) {
      this.$router.push(`/jobs/${jobId}`)
    },
    viewCaseDetail(caseId) {
      this.$router.push(`/cases/${caseId}`)
    }
  }
}
</script>

<style scoped>
.employment-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', 'PingFang SC', sans-serif;
  color: #2c3e50;
}

.employment-banner {
  background: linear-gradient(135deg, #3498db, #2c3e50);
  color: white;
  border-radius: 10px;
  padding: 3rem 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.banner-content h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}

.employment-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #f0f0f0;
  transition: all 0.3s;
}

.status-card.active {
  border-color: #3498db;
  background-color: #f0f7ff;
}

.status-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.card-icon {
  width: 60px;
  height: 60px;
  background-color: #f0f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
  color: #3498db;
  font-size: 1.8rem;
}

.status-card.active .card-icon {
  background-color: #3498db;
  color: white;
}

.card-content h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  color: #7f8c8d;
  margin: 0;
}

.status-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  transition: background-color 0.3s;
}

.status-btn:hover {
  background-color: #2980b9;
}

.employment-section {
  background-color: white;
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.section-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.section-header h2 {
  font-size: 1.5rem;
  color: #2c3e50;
  display: flex;
  align-items: center;
}

.section-header h2 i {
  margin-right: 0.8rem;
  color: #3498db;
}

.section-description {
  color: #7f8c8d;
  margin-top: 0.5rem;
}

.employment-form {
  margin-top: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #2c3e50;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.save-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #2980b9;
}

.cancel-btn {
  background-color: white;
  border: 1px solid #ddd;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s;
}

.cancel-btn:hover {
  background-color: #f5f5f5;
}

.employment-info {
  margin-top: 1.5rem;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.8rem;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.info-label {
  font-weight: 600;
  margin-right: 0.8rem;
  min-width: 80px;
}

.info-value {
  flex: 1;
}

.edit-btn {
  background-color: transparent;
  border: 1px solid #3498db;
  color: #3498db;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  margin-left: 1rem;
  transition: all 0.3s;
}

.edit-btn:hover {
  background-color: #f0f7ff;
}

.edit-btn i {
  margin-right: 0.3rem;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #7f8c8d;
}

.empty-state i {
  font-size: 2.5rem;
  color: #bdc3c7;
  margin-bottom: 1rem;
}

.empty-state p {
  margin-bottom: 1.5rem;
}

.add-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.add-btn:hover {
  background-color: #2980b9;
}

.add-btn i {
  margin-right: 0.5rem;
}

.progress-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

.progress-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.step {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
  background-color: #f8f9fa;
  position: relative;
}

.step::before {
  content: '';
  position: absolute;
  left: 30px;
  top: -1.5rem;
  height: 1.5rem;
  width: 2px;
  background-color: #ddd;
}

.step:first-child::before {
  display: none;
}

.step.active {
  background-color: #e8f4fc;
}

.step.current {
  background-color: #d4e6f7;
  border-left: 4px solid #3498db;
}

.step-number {
  width: 40px;
  height: 40px;
  background-color: #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-weight: bold;
  color: white;
}

.step.active .step-number {
  background-color: #3498db;
}

.step.current .step-number {
  background-color: #2980b9;
}

.step-info h3 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.step-info p {
  color: #7f8c8d;
  margin: 0;
  font-size: 0.9rem;
}

.step-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.step-btn:hover {
  background-color: #2980b9;
}

.progress-chart {
  height: 250px;
}

.resource-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 1.5rem;
}

.resource-tabs button {
  padding: 0.8rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #7f8c8d;
  position: relative;
}

.resource-tabs button.active {
  color: #3498db;
  font-weight: 600;
}

.resource-tabs button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #3498db;
}

.resource-content {
  margin-top: 1rem;
}

.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.resource-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #2c3e50;
}

.company {
  display: inline-block;
  background-color: #f0f7ff;
  color: #3498db;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-right: 0.5rem;
}

.salary {
  color: #e74c3c;
  font-weight: bold;
  font-size: 0.9rem;
}

.card-body {
  padding: 1rem;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  font-size: 0.8rem;
  color: #7f8c8d;
}

.job-meta i {
  margin-right: 0.3rem;
}

.job-desc {
  color: #2c3e50;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  padding: 0.8rem;
  border-top: 1px solid #eee;
}

.apply-btn {
  flex: 1;
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-right: 0.5rem;
  transition: background-color 0.3s;
}

.apply-btn:hover {
  background-color: #2980b9;
}

.detail-btn {
  flex: 1;
  background-color: white;
  border: 1px solid #3498db;
  color: #3498db;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.detail-btn:hover {
  background-color: #f0f7ff;
}

.article-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-content {
  padding: 1rem;
}

.article-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #2c3e50;
}

.article-excerpt {
  color: #7f8c8d;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
}

.article-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #bdc3c7;
  margin-bottom: 0.8rem;
}

.read-more {
  color: #3498db;
  font-size: 0.9rem;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.tool-card {
  display: flex;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.tool-icon {
  width: 60px;
  height: 60px;
  background-color: #f0f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: #3498db;
  font-size: 1.5rem;
}

.tool-content {
  flex: 1;
}

.tool-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #2c3e50;
}

.tool-content p {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.tool-link {
  color: #3498db;
  font-size: 0.9rem;
  text-decoration: none;
}

.tool-link:hover {
  text-decoration: underline;
}

.tool-link i {
  margin-left: 0.3rem;
}

.success-cases {
  background-color: white;
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.case-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.case-image {
  height: 200px;
  overflow: hidden;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-content {
  padding: 1.5rem;
}

.case-content h3 {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  color: #2c3e50;
}

.case-position {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.case-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.stat {
  text-align: center;
}

.stat-value {
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  font-size: 0.8rem;
  color: #7f8c8d;
}

.case-quote {
  font-style: italic;
  color: #2c3e50;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.case-btn {
  display: block;
  width: 100%;
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

.case-btn:hover {
  background-color: #2980b9;
}

@media (max-width: 768px) {
  .employment-container {
    padding: 1rem;
  }
  
  .employment-banner {
    padding: 2rem 1rem;
  }
  
  .banner-content h1 {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .employment-status {
    grid-template-columns: 1fr;
  }
  
  .progress-container {
    grid-template-columns: 1fr;
  }
  
  .resource-list {
    grid-template-columns: 1fr;
  }
  
  .article-card {
    grid-template-columns: 1fr;
  }
  
  .article-image {
    height: 150px;
  }
}
</style>
